<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3_react生命周期(新)</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx转换为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">  // 此处一定要写babel

    /*
    1.初始化阶段:由ReactDOM.render()触发---初次渲染
        1.constructor()
        2.getDerivedStateFromProps()
        3.render()
        4.componentDidMount() ===> 常用
    2.更新阶段:由组件内部this.setSate()或父组件重新render触发
        1.getDerivedstateFromProps()
        2.shouldComponentUpdate()
        3.render()
        4.getSnapshotBeforeUpdate()
        5.componentDidUpdate()
    3.卸载组件:由ReactDOM.unmountComponentAtNode()触发
        1.componentWillUnmount()  ===> 常用
    
    */

    // 1. 创建组件
    class Life extends React.Component {

      constructor(props) {
        super(props)
        console.log('Life---constructor')
        // 初始化状态
        this.state = { count: 10 }
      }

      // 加1按钮回调
      add = () => {
        // 获取原生状态
        const { count } = this.state
        // 更新状态
        this.setState({ count: count + 1 })
      }
    
      // 卸载组件按钮的回调
      death = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      //强制更新按钮的回调
      force = () => {
         this.forceUpdate()
      }

      //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
      static getDerivedStateFromProps(props, state) {
        console.log('Life---getDerivedStateFromProps', props, state)
        return null
      }

      // 在更新之前获取快照
      getSnapshotBeforeUpdate(){
        console.log('Life---getSnapshotBeforeUpdate')
        return 'atguigu'
      }

      // 组件挂载完毕的钩子
      componentDidMount() {
        console.log('Life---componentDidMount')
      }


      //组件将要卸载的钩子
      componentWillUnmount() {
        console.log('Life---componentWillUnmount')

      }
      //控制组件更新的“阀门”
      shouldComponentUpdate() {
        console.log('Life---shouldComponentUpdate')
        return true
      }

      // 组件更新完毕的钩子
      componentDidUpdate(preProps, preState, snapshotValue) {
        console.log('Life---componentDidUpdate', preProps, preState, snapshotValue)
      }


      // 初始化渲染、状态更新之后
      render() {
        console.log('Life---render')
        const { count } = this.state
        return (
          <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={this.add}>点我+1</button>
            <button onClick={this.death}>卸载组件</button>
            <button onClick={this.force}>强制刷新</button>
          </div>
        )
      }
    }

    // 2. 渲染虚拟组件到页面
    ReactDOM.render(<Life count={190}/>, document.getElementById('test'))

  </script>
</body>

</html>